<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../aui/css/aui-iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/css.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/swiper-3.3.1.min.css"/>
</head>

<body>
<style>
    .reg-body {
        background: #fff;
        width: 100%;
        height: 100%;
        position: fixed;
    }

    [v-cloak] {
        display: none;
    }

    .reg-1 {
        width: 100%;
        background: #fff;
        /*height: 200px;*/
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
    }

    .reg-tel {
        width: 92%;
        border-bottom: 1px solid #f8f8f8;
        height: 60px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .reg-tel .reg-tel_label {
        width: 50px;
        font-size: 16px;
        color: #666666;

    }

    .reg-tel .reg-tel_label i {
        width: 26px;
        height: 36px;
        color: #BB70FF;
        font-size: 22px;
        /*background: linear-gradient(90deg, rgba(169, 172, 255, 1), rgba(192, 124, 251, 1));*/
        /*box-shadow: 0px 9px 18px 0px rgba(187, 112, 255, 0.41);*/
    }

    .reg-button {
        width: 80%;
        height: 45px;
        background: #d7d8d8;
        border-radius: 5px;
        /*margin: 40px auto;*/
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;
        border: none;
    }

    .reg-button.active {
        background: #1cd9f1;
        border: none !important;
    }

    .container {
        /*position: absolute;*/
        bottom: 30px;
        padding: 10px;
        text-align: center;
        padding-top: 30px;
    }

    .container p {
        font-family: "微软雅黑";
        color: #888;
    }

    .val-box {
        display: inline-block;
        height: 40px;
        width: 216px;
        text-align: center;
        position: relative;
        background: #FFFFFF;
        -webkit-tap-highlight-color: transparent;
    }

    .val-box input[type=text] {
        position: absolute;
        left: 0;
        top: 0;
        height: 37px;
        width: 212px;
        opacity: 0.9;
        z-index: -999;
        outline: none;
        margin-left: 1000px;
        -webkit-tap-highlight-color: transparent;
    }

    .val-box div {
        height: 38px;
        width: 22%;
        border: 1px solid #DDD;
        border-radius: 5px;
        float: left;
        margin: 2px 3px;
        z-index: 5;
        font-size: 1.5em;
        font-family: arial;
        /*font-weight: 530;*/
        text-align: center;
        line-height: 1.5em;
        cursor: text;
        /*padding-bottom: 10px;*/
    }

    .val-box .available {
        border-color: #0081db;
    }

    .reg-code {
        background: #fff;
        padding-bottom: 10px;
    }

    .reg-code .reg-button {
        padding: 20px;
    }

    .xieyi {
        background: #ededed;
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        z-index: 1000111;
    }

    .xieyidesc {
        width: 90%;
        margin: auto;
        height: 450px;
        margin-top: 110px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 10px 40px 0px rgba(153, 153, 153, 0.2);
        border-radius: 5px;
        position: absolute;
        z-index: 1100;
    }

    .xieyidesc .xieyidesctitle {
        padding-top: 20px;
        margin-bottom: 20px;
        font-size: 16px;
        font-family: MicrosoftYaHei;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        text-align: center;
    }

    .xieyidesc .xieyidesccont {
        overflow: scroll;
        height: 350px;
        width: 90%;
        margin: auto;
    }

    .xieyititle {
        margin-top: 20px;
        position: fixed;
        bottom: 20px;
        left: 0;
        font-size: 12px;
        width: 100%;
        text-align: center;
        color: #999999;
    }

    .xieyititle span {
        color: #6D43E5;
    }

    .inputStyle {
        height: 38px !important;
        width: 50px !important;
        border: 1px dashed #DDD !important;
        border-radius: 5px;
        float: left;
        margin: 2px 3px;
        z-index: 5;
        font-size: 14px !important;
        font-family: arial;
        /* font-weight: 530; */
        text-align: center;
        line-height: 38px !important;
        cursor: text;
        /* padding-bottom: 10px; */
        margin-left: 10px;
        margin-right: 10px;
    }

    .code {
        width: 80%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: auto;
        margin-top: 20px;
        padding-top: 30px;
    }

    .islogin {
        color: #999;
        padding-bottom: 20px;
    }

    .xieyititle {
        position: fixed;
        bottom: 10px;
        text-align: center;
        width: 100%;
    }

    .quedingxieyi {
        float: right;
        margin-top: 10px;
        margin-right: 10px;
        z-index: 100;
        color: #6D43E5;
    }

    .active {
        /*border: 1px solid #6D43E5 !important;*/
    }

    .getcode {
        width: 125px;
        height: 30px;
        background: linear-gradient(90deg, rgba(169, 172, 255, 1), rgba(192, 124, 251, 1));
        border-radius: 15px;
        font-size: 12px;
    }

    .getcode.active {
        background: #e8e8e8;
    }

    .mask2 {
        width: 100%;
        height: 100%;
        position: fixed;
        background: #d5d5d5;
    }

    .reg-tel_input {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .reg-login {
        width: 79%;
        margin: auto;
        height: 50px;
        background: linear-gradient(90deg, rgba(169, 172, 255, 1), rgba(192, 124, 251, 1));
        box-shadow: 0px 8px 15px 0px rgba(187, 112, 255, 0.41);
        border-radius: 25px;
        margin-top: 50px;
    }
</style>
<div id="app">
    <div id="wraps" class="flex-wrap bgn flex-vertical">
        <header>
            <ul>
                <li class="active">
                    <i onclick="back()" class="icon iconfont icon-back"></i>
                    <span>忘记密码</span>
                </li>
            </ul>
        </header>
        <div class="reg-body">
            <div v-if="status==0" v-show="!xieyishow" class="reg-1 fixed-header">
                <!--            <div class="reg-1 fixed-header">-->
                <div class="reg-tel">
                    <div class="reg-tel_label">
                        <i class="icon iconfont icon-shouji"></i>
                    </div>
                    <div class="reg-tel_input">
                        <input v-model="tel" type="number" placeholder="请输入电话">
                    </div>
                </div>
                <div class="reg-tel">
                    <div class="reg-tel_label">
                        <i class="icon iconfont icon-anquan"></i>
                    </div>
                    <div class="reg-tel_input">
                        <input v-model="code" type="number" placeholder="请输入验证码">
                        <div v-show="show" class="reg-button getcode" @click="getCode">
                            获取验证码
                        </div>
                        <div v-show="!show" class="reg-button getcode active">
                            {{count}} s
                        </div>
                    </div>
                </div>
                <div class="reg-tel">
                    <div class="reg-tel_label">
                        <i class="icon iconfont icon-anquan"></i>
                    </div>
                    <div class="reg-tel_input">
                        <input v-model="newpassword" type="password" placeholder="请输入新密码">
                    </div>
                </div>
                <div class="reg-button reg-login" @click="getLogin">
                    重置密码
                </div>
            </div>
            <!--            <div v-if="status==1" v-show="!xieyishow" class="reg-code fixed-header">-->
            <!--                <div id="shoujihao">-->
            <!--                    <span></span>-->
            <!--                    <div class="code">-->
            <!--                        <input id="first" class="inputStyle" :class="{active:smsCode.length==0}" v-model="code[0]"-->
            <!--                               type="number"/>-->
            <!--                        <input id="second" class="inputStyle" :class="{active:smsCode.length==1}" v-model="code[1]"-->
            <!--                               style="border-left:1px solid #c6c6c6;"-->
            <!--                               type="number"/>-->
            <!--                        <input id="third" class="inputStyle" :class="{active:smsCode.length==2}" v-model="code[2]"-->
            <!--                               style="border-left:1px solid #c6c6c6;"-->
            <!--                               type="number"/>-->
            <!--                        <input id="forth" class="inputStyle" :class="{active:smsCode.length==3}" v-model="code[3]"-->
            <!--                               style="border-left:1px solid #c6c6c6;"-->
            <!--                               type="number"/>-->
            <!--                    </div>-->
            <!--                    <div class="reg-button" :class="{active:smsCode.length==4}" @click="getLogin">-->
            <!--                        {{logintitle}}-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="xieyititle" @click="xieyis">
                注册即表示同意《<span>点点情缘用户协议</span>》
            </div>
        </div>
        <div v-if="xieyishow" class="xieyi">
            <div class="mask2"></div>
            <div class="xieyidesc">
                <div class="xieyidesctitle">用户规则</div>
                <div class="xieyidesccont" v-html="agreement">
                </div>
                <span class="quedingxieyi" @click="xieyis">确定</span>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/swiper-3.3.1.min.js"></script>
<script type="text/javascript">
    apiready = function () {
        var main = new Vue({
            el: "#app",
            data: {
                title: '登录',
                tel: '',
                // status: 1,
                status: 0,
                code: '',
                smsCode: '',
                xieyishow: false,
                isLogin: true,
                title2: '没有账号？点击注册',
                code: '',
                event: 'mobilelogin',
                logintitle: '登录',
                newpassword: '',
                agreement: '',
                codeId: ['first', 'second', 'third', 'forth'],
                show: true,
                count: 0,
                timer: null,

            },
            mounted: function () {
                var that = this;
                that.getagreement()
                api.addEventListener({ //监听安卓返回键
                    name: 'keyback'
                }, function (ret, err) {
                    api.closeWidget() //关闭应用
                });
            },
            methods: {
                xieyis: function () {
                    this.xieyishow = !this.xieyishow
                },
                getagreement: function () {
                    var that = this;
                    api.ajax({
                        url: ajaxRoute.agreement,
                        method: 'get',
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            that.agreement = ret.data
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
                checklogin: function () {
                    this.isLogin = !this.isLogin
                    if (this.isLogin) {
                        this.title = "登录"
                        this.title2 = "没有账号？点击注册"
                        this.event = "mobilelogin"
                        this.logintitle = "登录"
                    } else {
                        this.title = "注册"
                        this.title2 = "立即登录"
                        this.event = "register"
                        this.logintitle = "完善资料"

                    }
                },
                getCode: function () {
                    var that = this;
                    if (that.tel == '') {
                        api.toast({msg: '请输入手机号', location: 'middle'});
                        return
                    }
                    if (that.tel.length < 11) {
                        api.toast({msg: '请输入正确的手机号', location: 'middle'});
                        return
                    }
                    showProgress();
                    api.ajax({
                        url: ajaxRoute.sms,
                        method: 'post',
                        data: {
                            values: {
                                mobile: that.tel,
                                event: 'resetpwd',
                            }
                        }
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            api.toast({msg: '验证码发送成功', location: 'middle'});
                            // that.status = 1
                            const TIME_COUNT = 60;
                            if (!that.timer) {
                                that.count = TIME_COUNT;
                                that.show = false;
                                that.timer = setInterval(function () {
                                    if (that.count > 0 && that.count <= TIME_COUNT) {
                                        that.count--;
                                    } else {
                                        that.show = true;
                                        clearInterval(that.timer);
                                        that.timer = null;
                                    }
                                }, 1000);
                            }
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
                getLogin: function () {
                    var that = this;
                    if (that.tel == '') {
                        api.toast({msg: '请输入手机号', location: 'middle'});
                        return
                    }
                    if (that.code == '') {
                        api.toast({msg: '请输入验证码', location: 'middle'});
                        return
                    }
                    if (that.code.length < 4) {
                        api.toast({msg: '请输入正确验证码', location: 'middle'});
                        return
                    }
                    if (that.newpassword == '') {
                        api.toast({msg: '请输入新密码', location: 'middle'});
                        return
                    }
                    showProgress();
                    api.ajax({
                        url: ajaxRoute.userresetpwd,
                        method: 'post',
                        data: {
                            values: {
                                mobile: this.tel,
                                newpassword: this.newpassword,
                                captcha: this.code,
                            }
                        }
                    }, function (ret, err) {
                        if (ret.code == 1) {
                            api.toast({msg: '重置密码成功,请登录', location: 'middle'});
                            setTimeout(function () {
                                back()
                            }, 2000)
                        } else {
                            api.hideProgress();
                            api.toast({msg: ret.msg, location: 'middle'});
                        }
                    });
                },
            },
            filters: {},
            watch: {
                // code: function (newValue, oldValue) {
                //     api.notification({
                //         sound: 'default'
                //     });
                //     console.log('newValue.length' + newValue.length)
                //     var tempValue = ''
                //     for (var i = 0; i < newValue.length; i++) {
                //         if (i == 5) {
                //             console.log(i)
                //             break
                //         }
                //         if (newValue[i]) {
                //             tempValue = tempValue + newValue[i]
                //         }
                //     }
                //     this.smsCode = tempValue
                //     console.log('smsCode ' + this.smsCode)
                //     var m = tempValue.split("")
                //     var location = 0
                //     for (var i = 0; i < newValue.length; i++) {
                //         if (m[i] && i < 4) {
                //             location++
                //             newValue[i] = m[i]
                //         } else {
                //             newValue[i] = ''
                //         }
                //     }
                //     // console.log(this.codeId[i])
                //     if (location < 1) {
                //         location = 1
                //     } else if (location > 5) {
                //         location = 5
                //     }
                //     document.getElementById(this.codeId[location - 1]).focus()
                // }
            },
        })
    }
</script>

</html>
